<template>
  <div class="table-classic-wrapper">
    <el-card shadow="always">
      <!--搜索栏 -->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-form
              :inline="true"
              class="search-form">
            <el-form-item>
              <el-input placeholder="请输入美食名称" v-model="searchForm.text">
                <i slot="suffix" class="el-input__icon el-icon-search"
                   @click="searchCommodityByText()"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="danger" @click="getCommodityList">获取全部美食</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!--美食列表-->
      <el-table
          :data="commodityList"
          style="width: 100%;"
          :header-cell-style="{textAlign: 'center'}"
          @selection-change="handleSelectionChange"
          :cell-style="{textAlign: 'center'}"
          stripe
          class="table-inline-edit">

        <el-table-column type="selection" width="50"/>

        <el-table-column
            prop="id"
            label="美食编号">
        </el-table-column>

        <el-table-column
            prop="picture"
            label="美食图片"
            align="center">
          <template slot-scope="scope">
            <el-image
                style="width: 40px; height: 40px"
                :src="handlerImg(scope.row.picture)"
                fit="fill"></el-image>
          </template>
        </el-table-column>

        <el-table-column
            label="美食名称">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>美食名称: {{ scope.row.text }}</p>
              <p>美食类别: {{ scope.row.type }}</p>
              <p>美食价格: {{ scope.row.price }}</p>
              <p>美食数量: {{ scope.row.saleCount }}</p>
              <p>餐厅名称: {{ scope.row.userName }}</p>
              <p>餐厅电话: {{ scope.row.telephone }}</p>
              <div slot="reference">
                <el-tag size="medium">{{ scope.row.text }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
            prop="type"
            label="美食类别">
        </el-table-column>

        <el-table-column
            prop="price"
            label="美食价格">
        </el-table-column>

        <el-table-column
            prop="saleCount"
            label="数量"
            align="center">
        </el-table-column>

        <el-table-column
            prop="auditState"
            label="美食审核状态"
            align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.auditState===0" effect="plain">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.auditState===1" effect="plain">已发布</el-tag>
            <el-tag type="primary" v-if="scope.row.auditState===2" effect="plain">审核未通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="餐厅名称"
            align="center">
          <template slot-scope="scope">
            <el-tag type="info" size="medium">{{ scope.row.userName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="餐厅状态"
            align="center">
          <template slot-scope="scope">
            <el-tag type="primary" size="medium" v-if="scope.row.enableState===0">未禁用</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.enableState===1">已禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)" :disabled="scope.row.auditState!==0">编辑
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>

      <!--
      新增/编辑 弹出栏
      visible：是否显示 Dialog，支持.sync修饰符
      -->
      <el-dialog
          title="编辑"
          :visible.sync="formVisible"
          width="30%"
          class="dialog-form"
          :before-close="handleClose">
        <el-form
            ref="updateForm"
            :model="updateForm"
            label-width="150px">

          <el-form-item label="美食审核状态：" prop="auditState">
            <el-select v-model="updateForm.auditState" placeholder="请选择">
              <el-option :value="0" label="待审核" disabled/>
              <el-option :value="1" label="已发布"/>
              <el-option :value="2" label="审核未通过"/>
            </el-select>
          </el-form-item>

          <div class="footer-item">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
          </div>
        </el-form>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getAllCommodity, updateDefinedCommodity, getCommodityByText} from "@/api/administration/commodity";

export default {
  name: "AdministratorAuditCommodity",
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,//美食总数
      currentPage: 0,//当前页码
      pageSize: 6,//每页显示条数

      /*
      * 多选数据暂存数组
      */
      multipleSelection: [],

      /**
       * 跨域显示图片
       */
      picture: undefined,

      /**
       * 搜索内容
       */
      searchForm: {
        text: '',//搜索框中输入的商品名称
      },

      /**
       * 更新列表
       */
      updateForm: {
        id: undefined,
        auditState: undefined,
        price: undefined,
        appraiseScore: undefined
      },

      /**
       * 美食信息列表
       */
      commodityList: [],

      /*
      * 新增/编辑 弹出框显示/隐藏
      */
      formVisible: false,

    }
  },

  created() {
    this.getCommodityList();
  },

  methods: {
    /**
     * 获得全部美食列表
     */
    getCommodityList() {
      const formData = new FormData();

      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      getAllCommodity(formData).then(res => {
        this.commodityList = res.information;
        this.total = res.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })
    },

    /**
     * 通过美食名称进行搜素
     */
    searchCommodityByText() {
      if (this.searchForm.text === '') {
        this.$message.warning("请输入美食名称");
        this.commodityList = [];
        this.total = 0;
      } else {
        const formData = new FormData();
        formData.append("currentPage", this.currentPage);
        formData.append("pageSize", this.pageSize);
        formData.append("text", this.searchForm.text);

        getCommodityByText(formData).then(res => {
          this.commodityList = res.information;
          this.total = res.total;
        }).catch(() => {
          this.$message({
            message: "error",
            type: "error"
          })
        })
      }
    },

    /**
     * 编辑表单提交
     */
    submitForm() {
      if (this.updateForm.auditState !== '') {
        const dataForm=new FormData();
        dataForm.append("id",this.updateForm.id);
        dataForm.append("auditState",this.updateForm.auditState);

        this.modifyDefinedCommodity(dataForm);
        this.formVisible = false;
      } else {
        this.$message({
          message: "请选择美食审核状态，再点击确定",
          type: "error"
        })
      }
    },

    /**
     * 修改指定商品的信息
     */
    modifyDefinedCommodity(dataForm){
      updateDefinedCommodity(dataForm).then(res=>{
        if(res.information === 1){
          this.$message.success("更新成功");
          this.getCommodityList()
        } else{
          this.$message.error("更新失败");
        }
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })
    },

    /*
     * 编辑表单取消提交
     */
    cancelForm() {
      this.formVisible = false;
      this.$refs.updateForm.resetFields();
    },

    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      this.updateForm.id = row.id;
      this.updateForm.price = row.price;
      this.updateForm.auditState = '';
      this.updateForm.appraiseScore=row.appraiseScore;
      this.formVisible = true;
    },

    /**
     * before-close：关闭前的回调，会暂停Dialog的关闭
     * 编辑弹出框，关闭时操作
     */
    handleClose() {
      this.formVisible = false;
      this.$refs.updateForm.resetFields();
    },

    /*
    * 多选操作，与multipleSelection相对应
    * 该功能在管理员页面没有实际作用
    */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      this.getCommodityList();
    },

  },
}
</script>

<style scoped>
@import "../../../assets/less/aministration/commodity/cardCommodity.less";

</style>
